<template>
    <TopBanner />
    <!-- 菜单 -->
    <div class="menu">
        <div class="w">
            <img src="@/assets/img/logo.png" alt="" height="74px" />
            <el-menu mode="horizontal">
                <el-menu-item index="1">全部分类</el-menu-item>
                <el-menu-item index="2">信用评价</el-menu-item>
                <el-menu-item index="3">咨询留言</el-menu-item>
                <el-menu-item index="4">活动区</el-menu-item>
            </el-menu>

            <!-- 搜索框 -->
            <div>
                <div class="search-bar">
                    <form>
                        <input type="text" placeholder="" />
                        <button>
                            <el-icon><Search /></el-icon>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 商品分类 -->
    <div class="category">
        <!-- .slice().reverse() 反转数组 -->
        <el-breadcrumb :separator-icon="ArrowRight" class="w">
            <el-breadcrumb-item
                v-for="(item, index) in proInfo.category.slice().reverse()"
                :key="index"
                @click="search_category(item.categoryid, item.categoryname)"
            >
                {{ item.categoryname }}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="goods w flex-row">
        <!-- 图片预览 -->
        <div class="goods-preview">
            <GoodsImage :images="proInfo.photos" />
        </div>
        <!-- 商品信息 -->
        <div class="goods-block">
            <h2>{{ proInfo.name }}</h2>
            <div class="goods__price flex-row">
                <div>
                    商城价:
                    <span>￥{{ proInfo.salaprice }}</span>
                </div>
                <span>市场价: ￥{{ proInfo.markprice }}</span>
            </div>
            <div class="goods__info">
                <div class="flex-row">
                    <div>
                        货号：
                        <span>{{ proInfo.code }}</span>
                    </div>
                    <div>
                        商品品牌 :
                        <span>{{ proInfo.brand.brandname }}</span>
                    </div>
                </div>
                <div class="flex-row">
                    <div>
                        最小单位：
                        <span>{{ proInfo.specification }}</span>
                    </div>
                    <div>
                        计量单位：
                        <span>{{ proInfo.unit }}</span>
                    </div>

                    <div>
                        交货周期:
                        <span>{{ proInfo.deliverytime }}</span>
                    </div>
                </div>
            </div>
            <el-form class="goods__attributes" :model="proBuyForm" label-width="auto">
                <el-form-item label="商品规格：" class="goods__spec">
                    <span class="spec--active">{{ proInfo.specification }}</span>
                    <!-- <span>40包/箱</span> -->
                </el-form-item>
                <el-form-item label="运杂费：" class="goods__freight">
                    <el-input class="phone" value="满99包邮" disabled />
                </el-form-item>
                <el-form-item label="购买数量：">
                    <el-input-number v-model="proBuyForm.buycount" :step="1" :min="0" :max="100" />
                </el-form-item>
                <el-form-item>
                    <el-button plain size="default" @click="dialogVisible = true">加入购物车</el-button>
                    <el-button type="primary" plain size="default" @click="dialogVisible = true">立即购买</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <!-- 商品详情 -->
    <div class="description w">
        <!-- 点击切换的动态组件 -->
        <el-menu mode="horizontal" default-active="1">
            <el-menu-item index="1" @click="changeCom('Desciption')">商品详情</el-menu-item>
            <el-menu-item index="2" @click="changeCom('Parameter')">商品参数</el-menu-item>
            <el-menu-item index="3" @click="changeCom('Question')">常见问题</el-menu-item>
            <el-menu-item index="4" @click="changeCom('Evaluation')">商品评价</el-menu-item>
        </el-menu>
    </div>

    <div class="main">
        <template v-if="currentCom === 'Desciption'">
            <Desciption :des="proInfo.describe" />
        </template>
        <template v-else-if="currentCom === 'Parameter'">
            <Parameter />
        </template>
        <template v-else-if="currentCom === 'Question'">
            <Question />
        </template>
        <template v-else-if="currentCom === 'Evaluation'">
            <Evaluation />
        </template>
    </div>

    <!-- 下单引导窗口 -->
    <el-dialog v-model="dialogVisible" title="欢迎订购" width="420">
        <div style="padding: 8px 0">订购请联系客服</div>
        <div style="padding: 2px 0"><strong>微信：1778840XXXX</strong></div>
        <div style="padding: 2px 0"><strong>QQ：1778840XXXX</strong></div>
        <div>{{ proInfo.category }}</div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
// 商品页面URL样例 http://localhost:3300/#/product/CategoryId/productId
// http://localhost:3300/#/product/1/200184569069
import { ArrowRight, Search } from '@element-plus/icons-vue';
import { ref, reactive, watch } from 'vue';
import { useRoute } from 'vue-router';
import router from '@/router/index';
import TopBanner from '@components/top-banner.vue';
import Desciption from '@/views/product/desciption.vue';
import Parameter from '@/views/product/parameter.vue';
import Question from '@/views/product/question.vue';
import Evaluation from '@/views/product/evaluation.vue';
import GoodsImage from '@components/goods-image.vue';
import { getProInfoById } from '@/api/productApi.js';
const route = useRoute();
let proInfo = ref({});
const dialogVisible = ref(false);

let currentCom = ref('Desciption');
// 切换子组件
const changeCom = val => {
    currentCom.value = val;
};
let proBuyForm = reactive({
    // 购买数量
    buycount: 0,
});

/**
 * @description: 获取商品详情
 * @return {*}
 */
const getProInfo = proId => {
    const loading = ElLoading.service({
        lock: true,
        text: '正在加载',
        background: 'rgb(255,255,255)',
    });
    getProInfoById(proId).then(res => {
        proInfo.value = res.detail;
        loading.close();
    });
};

/**
 * @description: 搜素商品分类
 * @return {*}
 */
let search_category = (id, name) => {
    console.log(id, name);
    let path = router.resolve({ path: '/search', query: { categoryids: id, category: name } });
    window.open(path.href, '_blank');
};
watch(
    () => route.query.id,
    (newText, oldText) => {
        if (newText !== oldText) {
            getProInfo(newText);
        }
    }
);

getProInfo(route.query.id);
</script>

<style lang="scss">
.menu {
    padding: 4px 0;
    .w {
        display: flex;
        align-items: center;
        .el-menu {
            margin: 0 auto;
            padding: 12px 0;
            height: 74px;
            width: 100%;
            // height: 33px;
            border-bottom: none;
            margin-left: 40px;
        }
    }
}

.search-bar > form {
    position: relative;
    width: 550px;
    height: 36px;
    background-color: $blue1;
    border: 2px solid $blue1;
}
.search-bar > form > input {
    padding: 0;
    width: 488px;
    height: 32px;
    border: 1px solid transparent;
    padding: 1px;
    outline: none;
}
.search-bar > form > button {
    float: right;
    width: 58px;
    height: 36px;
    color: #e5e5e5;
    font-size: 24px;
    background-color: transparent;
    border: none;
    vertical-align: baseline;
}

.category {
    height: 33px;
    background-color: #fafafa;
    .el-breadcrumb {
        line-height: 33px;
        .el-breadcrumb__item .el-breadcrumb__inner {
            cursor: pointer;
            &:hover {
                color: $blue3;
            }
        }
    }
}

.goods {
    position: relative;
    margin-top: 8px;
    width: 1210px;
    height: 490px;
    background-color: #fff;
}
// .goods-preview {
//     float: left;
// }
.goods-block {
    width: 740px;
    height: 700px;
}
.goods__price {
    height: 54px;
    background-color: #f9f9f9;
    line-height: 54px;
    padding: 0 18px;
    > div span {
        font-size: 28px;
        color: $blue3;
    }
    > span {
        margin-left: 20px;
        text-decoration: line-through;
        color: #a5a599;
    }
}
.goods__info {
    height: 70px;
    padding-bottom: 16px;
    div {
        margin-top: 10px;
        padding: 0 8px;
        > div {
            height: 24px;
            line-height: 24px;
            margin-right: 20px;
            margin-top: 4px; // border: 1px solid red;
            color: #989898;
        }
        span {
            color: #000;
        }
    }
    border-bottom: 1px dotted #000;
}
.goods__attributes {
    padding-top: 24px;
    padding-left: 20px;
    font-size: 20px;
    .el-input {
        input {
            display: inline-block;
        }
    }
    .el-form-item:last-child {
        padding: 8px 0px 0px 80px;
        .el-button {
            margin-right: 24px;
        }
    }
    div,
    input,
    label,
    button {
        font-size: 16px;
    }
}
.goods__spec {
    span {
        color: #5e5e5e;
        border: 1px solid #aeadad;
        background-color: #fff;
        padding: 0 8px;
        margin: 0 4px;
    }
    .spec--active {
        color: #1f528a;
        border: 1px solid #1f528a;
        background-color: #ebf5ff;
    }
}
.goods__freight {
    .el-input.is-disabled .el-input__inner {
        -webkit-text-fill-color: #000;
    }
    .el-input.is-disabled .el-input__wrapper {
        background: #fff;
        box-shadow: none;
    }
}
.split-line::after {
    display: inline-block;
    width: 1200px;
    height: 1px;
    background: linear-gradient(to left, #fff 5%, gainsboro 50%, #fff 85%);
    z-index: 1;
    content: '';
}
.description {
    margin-top: 20px;
}

.main {
    width: 1200px;
    margin: 0 auto;
}
</style>
